<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img v-lazy="pageImgArr.pic01" alt="">
        <img id="share" @click="shareForWechat" v-lazy="pageImgArr.pic17" alt="">
      </div>
      <div><img v-lazy="pageImgArr.pic02" alt=""></div>
      <div><img v-lazy="pageImgArr.pic03" alt=""></div>
      <div><img v-lazy="pageImgArr.pic04" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#F6CDEB'}">
        <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(0,4)" :key="index"/>
      </div>
    </div>
    <div class="common">
      <div><img v-lazy="pageImgArr.pic05" alt=""></div>
      <div><img v-lazy="pageImgArr.pic06" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#E89D05'}">
        <goods-item :parentData="item" @childEvent="goForGoodsDetail"  v-for="(item,index) in pageGoodsIdArr.slice(4,10)" :key="index"/>
      </div>
    </div>
    <div class="common">
      <div><img v-lazy="pageImgArr.pic07" alt=""></div>
      <div><img v-lazy="pageImgArr.pic08" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#446552'}">
        <goods-item :parentData="item"  @childEvent="goForGoodsDetail"  v-for="(item,index) in pageGoodsIdArr.slice(10,14)" :key="index"/>
      </div>
    </div>
    <div class="common">
      <div><img v-lazy="pageImgArr.pic09" alt=""></div>
      <div><img v-lazy="pageImgArr.pic10" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#000000'}">
        <goods-item :parentData="item"  @childEvent="goForGoodsDetail"  v-for="(item,index) in pageGoodsIdArr.slice(14,18)" :key="index"/>
      </div>
    </div>
    <div class="common">
      <div><img v-lazy="pageImgArr.pic11" alt=""></div>
      <div><img v-lazy="pageImgArr.pic12" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#002C6B'}">
        <goods-item :parentData="item"  @childEvent="goForGoodsDetail"  v-for="(item,index) in pageGoodsIdArr.slice(18,22)" :key="index"/>
      </div>
    </div>
    <div class="common">
      <div><img v-lazy="pageImgArr.pic13" alt=""></div>
      <div><img v-lazy="pageImgArr.pic14" alt=""></div>
    </div>
    <div class="module">
      <div class="goods-container" :style="{'background':'#000000'}">
        <goods-item :parentData="item"  @childEvent="goForGoodsDetail"  v-for="(item,index) in pageGoodsIdArr.slice(22)" :key="index"/>
      </div>
    </div>
    <div><img v-lazy="pageImgArr.pic15" alt=""></div>
    <div class="more  goods-container">
      <goods-item :parentData="item"  @childEvent="goForGoodsDetail"  v-for="(item,index) in moreData.goodsArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import GoodsItem from 'components/GoodsItems/lineTwo.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi } from "@/apis/publicApi.js";
  export default {
    components:{GoodsItem},
    data(){
      return{
        isMaskLayer:false,//是否分享覆盖
        pageImgArr:{},
        pageGoodsIds:[
          1580237,1580259,1580773,1579823,
          1580255,1580263,1579761,1580239,1580775,1579759,
          1580251,1580249,1579765,1580779,
          1582091,1580003,1580777,1580245,
          1582093,1580247,1580771,1579763,
          1580253,1580241,1579825,1579767,1575933,1580257
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'',
          goodsIds:[
            1579979,1579981,1579985,1579989,1579995,1579997,1579999,1580005,1580009,1580013,1580045,1580015,1580017,1580035,1580037,
            1580039,1580041,1580043,1579983,1579987,1579991,1579993,1580001,1580003,1580011,1580019,1580021,1580023,1580025,1580027,
            1580029,1580031,1580033,1580791,1580789,1580787,1580785,1580783,1580799,1580793,1580795,1580797,1580781,1579829,1579827,
            1548341,1579833,1579831,1579835,1566025,1583741,1583789,1583583,1583581,1583535,1583281
          ],
          goodsArrList:[]
        },
        requestLock:false,//请求锁用于上啦加载
        pagination:{ pageIndex:0, pageSize:15, totalPage:0 }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.pagination.totalPage=Math.ceil(this.moreData.goodsIds.length/this.pagination.pageSize);
      this.initMoreParam();
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      window.addEventListener('scroll',function(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;//已经滚动到上面的页面高度
        let scrollHeight =  Math.max(document.body.scrollHeight,document.body.offsetHeight);//页面高度
        let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;//浏览器窗口高度
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if (scrollHeight -scrollTop - windowHeight <= 50 && !that.requestLock) {
          that.requestLock=true;//添加锁定
          that.getMoreGoodsApi(that.moreData.reqestIds);//请求数据
        }
      },false)
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/derssNote/derssNote01.jpg'),
          pic02:require('../../../assets/img/derssNote/derssNote02.jpg'),
          pic03:require('../../../assets/img/derssNote/derssNote03.jpg'),
          pic04:require('../../../assets/img/derssNote/derssNote04.jpg'),
          pic05:require('../../../assets/img/derssNote/derssNote05.jpg'),
          pic06:require('../../../assets/img/derssNote/derssNote06.jpg'),
          pic07:require('../../../assets/img/derssNote/derssNote07.jpg'),
          pic08:require('../../../assets/img/derssNote/derssNote08.jpg'),
          pic09:require('../../../assets/img/derssNote/derssNote09.jpg'),
          pic10:require('../../../assets/img/derssNote/derssNote10.jpg'),
          pic11:require('../../../assets/img/derssNote/derssNote11.jpg'),
          pic12:require('../../../assets/img/derssNote/derssNote12.jpg'),
          pic13:require('../../../assets/img/derssNote/derssNote13.jpg'),
          pic14:require('../../../assets/img/derssNote/derssNote14.jpg'),
          pic15:require('../../../assets/img/derssNote/derssNote15.jpg'),
          pic16:require('../../../assets/img/derssNote/derssNote16.jpg'),
          pic17:require('../../../assets/img/derssNote/derssNote17.png')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(){
        let param=this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          this.pageGoodsIdArr=res.data;
        })
      },
      initMoreParam(){
        let fromIndex =this.pagination.pageIndex*this.pagination.pageSize;
        let toIndex=(this.pagination.pageIndex+1)*this.pagination.pageSize;
        this.moreData.reqestIds=this.moreData.goodsIds.slice(fromIndex,toIndex).toString();
      },
      async getMoreGoodsApi(list){
        if(list.length==0 || !list){return false}
        await getGoodsListApi(list).then(res =>{
          if(res.code==200 && res.status=='success'){
            this.moreData.goodsArrList=this.moreData.goodsArrList.concat(res.data);
            this.pagination.pageIndex++;
            this.requestLock=false;//解除锁定
            this.initMoreParam();
          }
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1.25rem;
    height: 0.55rem;
    position: absolute;
    top: 0.2rem;right: 0;
  }
}
.module{
  background-image: url('../../../assets/img/derssNote/derssNote16.jpg');
  background-repeat: repeat-y;
  background-size: contain;
  &:nth-child(2n){background: #000;}
}
.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  margin: 0 0.15rem;
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>